<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #bgDiv{
      border: 1px solid #000;
      width: 300px;
      height: 300px;
      background-image: url("img/SnowPea.gif");/*设置背景图片*/
      background-repeat: no-repeat; /*设置平铺*/
      background-size: 150px 150px; /*背景图片大小*/
      background-position: 100px 100px; /*背景图片起始位置*/
    }

    #myDiv{
      width: 300px;
      height: 300px;
      background-image: url("img/6.jpg");
      background-size: contain;
    }

    #msDiv{
      width: 300px;
      height: 250px;
      background-image: url("img/ms.jpg");
    }
    #msDiv:hover{
      background-position: 0px -250px;
    }
  </style>
</head>
<body>
  <div id="bgDiv"></div>

  <div id="myDiv"></div>

  <div id="msDiv"></div>
</body>
</html>
